<template>
    <div :style="{
        position: 'absolute',
        top: 0,
        left: '50%',
        transform: 'translateX(-50%)',
        width: '100%',
        zIndex: 1000,
        padding: '1rem 2rem',
        boxSizing: 'border-box',
        maxWidth: '700px',
        pointerEvents: 'none',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        opacity: interfaceVisible ? 1 : 0,
        transition: 'opacity 0.3s ease-in-out',
    }">
        <div :style="{
            display: 'flex',
            justifyContent: 'center',
            gap: '0.5rem',
            marginTop: '1rem',
        }">
            <button v-for="(text, i) in CAMERAS" :key="i" :style="{
                padding: '0.5rem 1rem',
                backgroundColor: currentCamera === i ? '#fff' : '#555',
                color: currentCamera === i ? '#000' : '#fff',
                border: 'none',
                borderRadius: '0.25rem',
                cursor: 'pointer',
                pointerEvents: 'all',
                transition: 'background-color 0.3s, color 0.3s',
            }" @click="appStore.setCurrentCamera(i)">
                {{ text }}
            </button>
        </div>
        
        <!-- 材质切换按钮 -->
        <div :style="{
            display: 'flex',
            justifyContent: 'center',
            gap: '0.5rem',
            marginTop: '1rem',
        }">
            <button :style="{
                padding: '0.5rem 1rem',
                backgroundColor: appStore.useAdvancedMaterial ? '#4CAF50' : '#555',
                color: '#fff',
                border: 'none',
                borderRadius: '0.25rem',
                cursor: 'pointer',
                pointerEvents: 'all',
                transition: 'background-color 0.3s',
            }" @click="appStore.toggleMaterial()">
                {{ appStore.useAdvancedMaterial ? '高级材质' : '简单材质' }}
            </button>
        </div>
    </div>

    <footer :style="{
        position: 'absolute',
        bottom: '2rem',
        right: 0,
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-center',
        justifyContent: 'flex-center',
        gap: '1rem',
        padding: '1rem 1rem',
        boxSizing: 'border-box',
        color: '#fff',
        zIndex: 1000,
        pointerEvents: 'none',
    }">
        <div :style="{
            display: 'flex',
            alignItems: 'center',
            gap: '1rem',
            opacity: interfaceVisible ? 1 : 0,
            transition: 'opacity 0.3s ease-in-out',
        }">
            <h3 :style="{
                fontFamily: 'Bricolage Grotesque, sans-serif',
                color: '#fff',
                fontWeight: '800',
                margin: 0,
            }">
                选择车身颜色
            </h3>
        </div>
        <div :style="{
            width: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-start',
            gap: '0.5rem',
            opacity: interfaceVisible ? 1 : 0,
            transition: 'opacity 0.3s ease-in-out',
        }">
            <span v-for="(color, i) in COLORS" :key="i" :style="{
                display: 'inline-block',
                width: '1.5rem',
                aspectRatio: '1 / 1',
                backgroundColor: color.color,
                borderRadius: '50%',
                marginRight: '0.5rem',
                outline: '2px solid #fff',
                outlineWidth: colorIndex === i ? '5px' : '1px',
                cursor: 'pointer',
                pointerEvents: 'all',
            }" @click="appStore.setColorIndex(i)" />

            <span :style="{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '1.5rem',
                aspectRatio: '1 / 1',
                backgroundColor: '#555',
                borderRadius: '50%',
                marginRight: '0.5rem',
                outline: '2px solid #fff',
                outlineWidth: colorIndex === -1 ? '5px' : '1px',
                cursor: 'pointer',
                pointerEvents: 'all',
            }" @click="appStore.setColorIndex(-1)">
                <svg width="0.8rem" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    style="color: #fff; pointer-events: none;">
                    <path
                        d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2" />
                    <path d="m15.194 13.707 3.306 3.307a1 1 0 0 1-1.414 1.414l-3.307-3.306" />
                    <path d="M10 14.5c.5-3.5 2-6 4-6s3.5 2.5 4 6" />
                </svg>
            </span>
        </div>
    </footer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { CAMERAS, COLORS, useAppStore } from '../state'

const appStore = useAppStore()
const colorIndex = computed(() => appStore.colorIndex)
const currentCamera = computed(() => appStore.currentCamera)

const interfaceVisible = ref(true)
</script>
